Vue元件的屬性及方法

• 之前學的Vue元件，元件資料都放在data選項中，data選項是一個函數，元件在建立時，會呼叫此函數來建構回應式的資料系統。

屬性基礎

• 在Vue元件中定義的屬性資料，可以直接使用元件進行呼叫，因為Vue在組織資料時，任何定義的屬性都會暴露在元件裡，但實際上這些屬性資料是儲存在元件的$data物件中的。

const App ={
    data() {
        return {
            count:0
        }
    }
}
//建立元件並獲取元件
let instance = Vue.createApp(App).mount("#Application")
console.log(instance.count)       
console.log(instance.$data.count)
//以上兩者都可獲取元件中的data資料

• 上面這段程式中，透過使用實例直接獲取屬性或使用$data方式獲取資料的結果都是一樣的，本質上兩者所存取的資料是同一區塊的資料，無論使用什麼方式對資料進行修改，兩種方式獲取的值都會改變。
• 在開發中，可以動態地向元件實例中新增屬性，但這種方式新增的屬性無法被回應式系統追蹤，其變化無法同步到頁面元素。

方法基礎

• 元件的方法被定義在methods選項中，在實現元件的方法時，可使用this關鍵字，Vue自動將其綁定到當前元件實例本身。
• 例如：新增一個add方法

methods: {
    add() {
        this.count ++
    }
}

• 可直接綁定到HTML元素上，也可直接使用元件實例來呼叫此方法：

console.log(instance.count)   //0
instance.add()
console.log(instance.count)   //1

今天介紹的屬性與方法的基礎就先這樣，明天將會介紹計算屬性！